<template>
	<view class="box">
		<view class="title mlr-36 size-40 bold">
			{{type==1?'账号登录':'验证码登录'}}
		</view>
		<view class="mlr-36 size-26 gray-2 mt-10">
			{{type==1?'如账号未设置密码，请使用验证码登录方式':'请使用手机号，快速登录'}}
		</view>
		<view class="mlr-36 mt-40">
			<u-field v-model="tel" :trim="true" label-width="0" placeholder="请输入手机号"></u-field>
		</view>
		<view class="code mlr-36 flexz" v-if="type==2">
			<input type="text" v-model="code" placeholder="请输入验证码" />
			<view class="code1 white text-center" @click="getcode">
				{{vscode}}
			</view>
		</view>
		<view class="mlr-36 mt-10">
			<u-field v-model="pwd" v-if="type==1" :trim="true" :type="open?'text':'password'" label-width="0"
			 maxlength="16" placeholder="请输入密码">
				<u-icon slot="right" @click="open=false" v-show="open" name="eye-fill" color="#999" size="36"></u-icon>
				<u-icon slot="right" @click="open=true" v-show="!open" name="eye-off" color="#999" size="36"></u-icon>
			</u-field>
		</view>
		<view class="mlr-36 text-right size-26 gray-2 mt-30" v-if="type==1" @click="goForget">
			忘记密码?
		</view>
		<view class="mt-60">
			<u-button type="primary" :disabled="!tel || (!pwd && !code)" @click="submit">登录</u-button>
		</view>
		<view class="mlr-36 flexz mt-30">
			<text class="gray-2 size-26" @click="goRegister">立即注册</text>
			<text class="blue-1 size-26" @click="type=type==2?1:2,tel='',pwd='',code=''">{{type==1?'验证码登录':'密码登录'}}</text>
		</view>
		<view class="fixed-bottom pb-30">
			<!-- <view class="center">
				<view class="line"></view>
				<view class="size-26 gray-2 mlr-50">
					第三方登录
				</view>
				<view class="line"></view>
			</view>
			<view class="img text-center ptb-50" @click="wxLogin">
				<image :src="$wanlshop.oss('/uploads/staticImage/img/vx.png"')" mode=""></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1, //1=登录，2=验证码登录
				tel: '',
				code: '',
				pwd: '',
				vscode: '获取验证码',
				countNum: 60,
				countDownTimer: null,
				open: false
			}
		},
		onLoad() {

		},
		methods: {
			// gophone() {
			// 	uni.navigateTo({
			// 		url: '/pages/driver/login/phone'
			// 	})
			// },
			goRegister() {
				uni.navigateTo({
					url: '/pages/driver/login/register'
				})
			},
			goForget() {
				uni.navigateTo({
					url: '/pages/driver/login/forget-pwd?type=1'
				})
			},
			// 微信登录
			wxLogin() {
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes.authResult);
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								console.log(infoRes.userInfo);
								_this.$http('/addons/ddrive/wx_login/wxlogin', {
									openid: infoRes.userInfo.openId,
									wx_name: infoRes.userInfo.nickName,
									unionId: infoRes.userInfo.unionId
								}, "POST").then(data => {
									console.log(data);
									_this.$store.commit('getUserInfo', data.userinfo)
									setTimeout(() => {
										uni.showToast({
											title: '授权成功'
										})
									}, 100)
									if (data.userinfo.mobile) {
										uni.switchTab({
											url: "/pages/driver/home/index"
										})
									} else {
										uni.navigateTo({
											url: '/pages/driver/login/phone?type=0'
										})
									}
								})
							}
						});
					}
				});
			},
			// 获取短信验证码
			getcode() {
				var myreg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
				if (!myreg.test(this.tel)) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (this.vscode != '获取验证码' && this.vscode != '重新发送') {
					return
				}
				this.countNum = 60
				this.countDownTimer = setInterval(() => {
					if (this.countNum < 1) {
						clearInterval(this.countDownTimer)
						this.vscode = "重新发送";
						return;
					}
					this.countNum--;
					this.vscode = this.countNum + '秒重发';
				}, 1000)
				this.$http('/api/sms/send', {
					mobile: this.tel,
					event: 'mobilelogin'
				}, 'POST').then(data => {
					uni.showToast({
						title: '短信已发送，请注意查收',
						icon: 'none'
					})
				})
			},
			submit() {
				if (this.type == 1) {
					// 密码登录
					this.$http('/addons/ddrive/user/login', {
						mobile: this.tel,
						password: this.pwd,
						app_type: 1
					}, 'POST').then(data => {
						this.$store.commit('getUserInfo', data.userinfo)
						uni.showToast({
							title: '登录成功'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/driver/home/index'
							})
						}, 500)
					})
				} else {
					// 验证码登录
					this.$http('/addons/ddrive/user/mobilelogin', {
						mobile: this.tel,
						captcha: this.code,
					}, 'POST').then(data => {
						this.$store.commit('getUserInfo', data.userinfo)
						uni.showToast({
							title: '登录成功'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/driver/home/index'
							})
						}, 500)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-field {
		padding: 13px 0 !important;
	}

	/deep/.u-btn {
		height: 96rpx !important;
	}

	/deep/.u-primary-hover {
		background-color: $blue !important;
	}

	/deep/.u-btn--primary--disabled {
		background-color: $bg-1 !important;
	}

	.box {
		width: 100%;
		height: 100vh;
		// background: url(/static/img/login-bg.png) no-repeat;
		background-image: url($cdnurl + "/uploads/staticImage/img/login-bg.png");
		background-size: 100% 100%;
		overflow: hidden;

		.title {
			margin-top: 200rpx;
		}

		.code {
			margin-top: 10rpx;
			padding-top: 14rpx;
			padding-bottom: 15rpx;
			border-bottom: 1rpx solid #f5f6f7;

			input {
				margin-left: 8rpx;
				font-size: 26rpx;
			}

			.code1 {
				width: 180rpx;
				height: 70rpx;
				font-size: 26rpx;
				line-height: 70rpx;
				background: $bg-1;
			}
		}

		.line {
			width: 178rpx;
			height: 2rpx;
			background: #eee;
		}

		.img {
			image {
				width: 92rpx;
				height: 92rpx;
			}
		}
	}
</style>
